<template>
  <!-- step 答案能渲染 题目不能渲染 step从无到有 内部执行了数据刷新 重新获取了数据 -->
  <div class="questionInfo" v-if="bol">
    <!-- 
        只限于$parent里面,$emit不受该限制 
        组件低级,包含它的标签如果全是原生标签,它的父组件就是当前.vue文件
        如果它外面 包含的标签非原生标签,那它的父组件就是相应标签对应组件
    -->
    <hmNavBar
      path="/home/question"
      title="刷题"
      right="答题卡"
      @rightClick="rightClick"
    >
    </hmNavBar>
    <div class="content" v-if="list.length > 0 && list[currIndex].detail">
      <div class="title">
        【{{ typeObj[list[currIndex].detail.type] }}】{{
          list[currIndex].detail.title
        }}
      </div>
      <div class="tag-list">
        <van-tag
          color="#f7f4f5"
          text-color="#c2c1c9"
          v-for="(item, index) in list[currIndex].detail.tag"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
      <!-- 单选 -->
      <ul class="select" v-if="list[currIndex].detail.type === 1">
        <!-- 错误：自己选择的答案不是最终的结果 
         正确：当前答与当前选项是否相同
         错误：自己做的选项就是当前选项str[index] 确定哪个选项错的  自己做的然后哪个选项又不是正确选项
        -->
        <li
          class="select-item"
          :class="{
            active: ans1 === str[index],
            right:
              list[currIndex].ans &&
              list[currIndex].ans.singleAnswer === str[index],
            error:
              list[currIndex].ans &&
              ans1 === str[index] &&
              ans1 !== list[currIndex].ans.singleAnswer
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="liClick(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 多选 -->
      <ul class="select" v-else-if="list[currIndex].detail.type === 2">
        <!-- 错误：自己选择的答案不是最终的结果 
         正确：当前答与当前选项是否相同
         错误：自己做的选项就是当前选项str[index] 确定哪个选项错的  自己做的然后哪个选项又不是正确选项
         list[currIndex].ans.multipleAnswer.includes(str[index])
        -->
        <li
          class="select-item"
          :class="{
            active: ans2.includes(str[index]),
            right:
              list[currIndex].ans &&
              list[currIndex].ans.multipleAnswer.includes(str[index]), //true
            error:
              list[currIndex].ans &&
              !list[currIndex].ans.multipleAnswer.includes(str[index]) //false
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="liClick2(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 简答 -->
      <div class="select2" v-else>
        <!-- van-field
                   type:textarea
                   rows:5
           -->
        <van-field
          class="field"
          type="textarea"
          rows="5"
          v-model="ans3"
          @input="input"
          :disabled="step > 1"
        ></van-field>
      </div>
      <div class="answer" v-if="step > 1">
        <h3 class="answer-title">答案解析</h3>
        <div class="answer-right" v-if="list[currIndex].detail.type === 1">
          正确答案：{{ list[currIndex].ans.singleAnswer }}
        </div>
        <div class="answer-right" v-else-if="list[currIndex].detail.type === 2">
          正确答案：{{ list[currIndex].ans.multipleAnswer }}
        </div>
        <!-- <div class="answer-right">
          正确答案:{{ list[currIndex].ans.singleAnswer }}
        </div> -->
        <div class="other">
          <span>难度：{{ diffObj[list[currIndex].ans.difficulty] }}</span>
          <span>提交次数：{{ list[currIndex].ans.submitNum }}</span>
          <span>正确次数：{{ list[currIndex].ans.correctNum }}</span>
        </div>
        <div class="answer-txt">
          {{ list[currIndex].ans.answerAnalysis }}
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="f1">
        <div class="iconfont">&#xe611;</div>
        <div class="txt">收藏</div>
      </div>
      <div class="f1">
        <div class="iconfont">&#xe606;</div>
        <div class="txt">反馈</div>
      </div>
      <div class="f2">
        <span class="num">{{ currIndex + 1 }}</span
        >/{{ list.length }}题
      </div>
      <div class="f3">
        <van-button
          v-if="step <= 1"
          color="red"
          :disabled="step == 0"
          @click="submit"
          >提交</van-button
        >
        <van-button v-else-if="step === 2" color="red" @click="next"
          >下一题</van-button
        >
        <van-button v-else color="red" @click="end">结束</van-button>
      </div>
    </div>
    <!-- 答题卡弹窗 -->
    <van-popup v-model="showCard" position="bottom">
      <ul class="card-list">
        <li
          class="card-item"
          :class="{
            right: item.ans && item.ans.isRight,
            error: item.ans && !item.ans.isRight
          }"
          v-for="(item, index) in list"
          :key="index"
          @click="skip(index)"
        >
          {{ index + 1 }}
        </li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
        <li class="card-noUse"></li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import {
  interviewQuestions,
  questionsSubmit,
  questionsInfo
} from '@/api/question'
export default {
  data () {
    return {
      city: this.$route.query.city,
      id: this.$route.query.id,
      list: [], //  所有题目
      currIndex: Number(this.$route.query.currIndex) || 0, //第几题
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      str: 'ABCDEFG',
      step: 0, // 0:读取题目,还没答题  1: 已做题但是没提交 2:点了提交,读取答案,但还没点下一题3:点了提交但没有下一题
      ans1: '', //单选答案
      ans2: [], //多选答案
      ans3: '', //简答答案
      bol: true, // 用于静默刷新
      showCard: false
    }
  },
  async created () {
    const res = await interviewQuestions({
      type: this.id,
      city: this.city
    })
    this.list = res.data.data
    // 这里可能没有题目需要去获取题目
    this.skip(this.currIndex)
    window.console.log(res)
  },
  methods: {
    rightClick () {
      this.showCard = true
    },
    // 单选题答题
    liClick (index) {
      // 当step>=2时 不允许在选择选项
      if (this.step < 2) {
        this.ans1 = this.str[index]
        // 回到第一步
        this.step = 1
      }
    },
    // 多项选择题
    end () {
      this.$router.push('/home/question')
    },
    // 提交
    async submit () {
      this.$toast.loading({
        duration: 0,
        message: '加载中'
      })
      const res = await questionsSubmit({
        id: this.list[this.currIndex].id,
        singleAnswer: this.ans1,
        multipleAnswer: this.ans2
      })
      this.$toast.clear()
      // 用step来确定是否是最后一题
      if (this.list.length === this.currIndex + 1) {
        this.step = 3
      } else {
        // 接口返回值后 step=2 显示下一题按钮 ??
        this.step = 2
      }
      res.data.data.ans1 = this.ans1
      res.data.data.ans2 = this.ans2
      res.data.data.ans3 = this.ans3
      // 将答案存储在相应题目对应索引项内
      this.list[this.currIndex].ans = res.data.data
      // window.console.log(res)
    },
    // 下一题
    async next () {
      // 题目索引+1
      this.currIndex++
      this.skip(this.currIndex)
      /*     this.currIndex++
      this.step = 0
      this.ans1 = ''
      this.ans2 = []
      this.ans3 = ''
      this.$toast.loading({
        duration: 0,
        message: '加载中'
      })
      const res = await questionsInfo(this.list[this.currIndex].id)
      this.$toast.clear()
      this.list[this.currIndex].detail = res.data.data
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      window.console.log(this.list) */
    },
    //答案卡快捷跳转
    async skip (index) {
      this.showCard = false
      this.currIndex = index
      this.step = 0
      // 清空答案
      this.ans1 = ''
      this.ans2 = []
      this.ans3 = ''
      // 你能确保它一定有题目
      //没有题目先解决没有题目的问题
      if (!this.list[index].detail) {
        this.$toast.loading({
          duration: 0,
          message: '加载中'
        })
        const res = await questionsInfo(this.list[this.currIndex].id)
        this.$toast.clear()
        //   将题目添加到数组相应索引位置
        this.list[this.currIndex].detail = res.data.data
      } else {
        // 有题目有答案
        if (this.list[this.currIndex].ans) {
          // 还原答案
          this.ans1 = this.list[this.currIndex].ans.ans1
          this.ans2 = this.list[this.currIndex].ans.ans2
          this.ans3 = this.list[this.currIndex].ans.ans3
          if (this.currIndex + 1 === this.list.length) {
            this.step = 3
          } else {
            this.step = 2
          }
        }
      }
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      //通过路由存储当前的题目索引(路由传参):
      this.$router.push(
        `${this.$route.path}?city=${this.city}&id=${this.id}&currIndex=${this.currIndex}`
      )
    },
    // 多选点击
    liClick2 (index) {
      if (this.step < 2) {
        //   if(ans2中存在该选项的值){删除}else{添加}
        const _index = this.ans2.indexOf(this.str[index])
        if (_index !== -1) {
          // 如果答案中存在该值 就删除该值
          this.ans2.splice(_index, 1)
          // 不存在就添加该值
        } else {
          this.ans2.push(this.str[index])
        }
        // 判断是否已选择答案
        if (this.ans2.length > 0) {
          this.step = 1
        } else {
          this.step = 0
        }
        window.console.log(this.ans2)
      }
    },
    input (value) {
      if (value.length > 0) {
        this.step = 1
      } else {
        this.step = 0
      }
    }
  }
}
</script>
<style lang="less" scoped>
.questionInfo {
  .content {
    padding: 0 @p15;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      // text-align: justify;
      word-wrap: break-word;
      word-break: break-all;
      color: #181a39;
      line-height: 22px;
      margin-top: 20px;
    }
    .select {
      margin-top: 25px;
      .select-item {
        border: 1px solid #f7f4f5;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 22px;
        padding: 10px 10px;
        margin-bottom: 15px;
      }
      .active {
        border-color: #000;
      }
      .right {
        background-color: #056312;
      }
      .error {
        background-color: rgb(211, 2, 2);
      }
    }
    .select2 {
      margin-bottom: 15px;
      .field {
        border: 1px solid #ccc;
      }
    }
    .answer {
      .answer-title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .answer-right {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #1dc779;
        line-height: 22px;
        margin: 15px 0;
      }
      .other {
        display: flex;
        justify-content: space-between;
        background: #f7f4f5;
        border-radius: 8px;
        span {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #545671;
          line-height: 30px;
          letter-spacing: 0px;
        }
      }
      .answer-txt {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 22px;
        margin-top: 15px;
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 @p15;
    height: 60px;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    background-color: #fff;
    .f1 {
      flex: 1;
      .iconfont {
        font-size: 24px;
      }
    }
    .f2 {
      flex: 2;
      font-size: 18px;
      .num {
        font-size: 22px;
        color: red;
      }
    }
    .f3 {
      flex: 2;
    }
  }
  .card-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 @p15;
    .card-item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #999;
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin-right: 10px;
      margin-top: 30px;
      font-size: 16px;
    }
    .card-noUse {
      width: 40px;
      height: 1px;
      margin-right: 10px;
      background-color: red;
    }
  }
  .right {
    background-color: #056312 !important;
  }
  .error {
    background-color: rgb(211, 2, 2) !important;
  }
}
</style>
